<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physics-diagram" width="450" height="500"></canvas>

<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Diagram parameters
    const cx = 225;
    const suspensionY = 50;
    const l_pixels = 200;
    const d_pixels = 100;
    const bobRadius = 8;
    const bobY = suspensionY + l_pixels;

    const plateAX = cx - d_pixels;
    const plateBX = cx + d_pixels;
    const plateTop = 20;
    const plateBottom = 350;
    const plateLineGap = 4;

    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Helper function to draw an arrowhead
    function drawArrowHead(x, y, angle) {
        const headlen = 8;
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
    }

    // 1. Draw the fixed support
    function drawSupport() {
        ctx.beginPath();
        const supportWidth = 60;
        ctx.moveTo(cx - supportWidth / 2, suspensionY);
        ctx.lineTo(cx + supportWidth / 2, suspensionY);
        ctx.stroke();

        const hatchLength = 15;
        const hatchAngle = Math.PI / 4;
        for (let i = 0; i <= 4; i++) {
            const hx = cx - supportWidth / 2 + (i * supportWidth / 4);
            ctx.moveTo(hx, suspensionY);
            ctx.lineTo(hx - hatchLength * Math.cos(hatchAngle), suspensionY - hatchLength * Math.sin(hatchAngle));
        }
        ctx.stroke();
    }

    // 2. Draw the pendulum
    function drawPendulum() {
        // String
        ctx.beginPath();
        ctx.moveTo(cx, suspensionY);
        ctx.lineTo(cx, bobY);
        ctx.stroke();

        // Bob
        ctx.beginPath();
        ctx.arc(cx, bobY, bobRadius, 0, 2 * Math.PI);
        ctx.stroke();
    }

    // 3. Draw the plates
    function drawPlates() {
        ctx.beginPath();
        // Plate A
        ctx.moveTo(plateAX - plateLineGap / 2, plateTop);
        ctx.lineTo(plateAX - plateLineGap / 2, plateBottom);
        ctx.moveTo(plateAX + plateLineGap / 2, plateTop);
        ctx.lineTo(plateAX + plateLineGap / 2, plateBottom);
        // Plate B
        ctx.moveTo(plateBX - plateLineGap / 2, plateTop);
        ctx.lineTo(plateBX - plateLineGap / 2, plateBottom);
        ctx.moveTo(plateBX + plateLineGap / 2, plateTop);
        ctx.lineTo(plateBX + plateLineGap / 2, plateBottom);
        ctx.stroke();
    }
    
    // 4. Draw the grounding
    function drawGrounding() {
        const wireY = plateBottom + 30;
        const horizontalLen = 40;
        const symbolWidth1 = 20;
        const symbolWidth2 = 14;
        const symbolWidth3 = 8;
        const symbolSpacing = 5;

        // Grounding for Plate A
        ctx.beginPath();
        ctx.moveTo(plateAX, plateBottom);
        ctx.lineTo(plateAX, wireY);
        ctx.lineTo(plateAX - horizontalLen, wireY);
        ctx.stroke();

        // Ground symbol A
        const groundAX = plateAX - horizontalLen;
        ctx.beginPath();
        ctx.moveTo(groundAX - symbolWidth1 / 2, wireY);
        ctx.lineTo(groundAX + symbolWidth1 / 2, wireY);
        ctx.moveTo(groundAX - symbolWidth2 / 2, wireY + symbolSpacing);
        ctx.lineTo(groundAX + symbolWidth2 / 2, wireY + symbolSpacing);
        ctx.moveTo(groundAX - symbolWidth3 / 2, wireY + 2 * symbolSpacing);
        ctx.lineTo(groundAX + symbolWidth3 / 2, wireY + 2 * symbolSpacing);
        ctx.stroke();

        // Grounding for Plate B
        ctx.beginPath();
        ctx.moveTo(plateBX, plateBottom);
        ctx.lineTo(plateBX, wireY);
        ctx.lineTo(plateBX + horizontalLen, wireY);
        ctx.stroke();
        
        // Ground symbol B
        const groundBX = plateBX + horizontalLen;
        ctx.beginPath();
        ctx.moveTo(groundBX - symbolWidth1 / 2, wireY);
        ctx.lineTo(groundBX + symbolWidth1 / 2, wireY);
        ctx.moveTo(groundBX - symbolWidth2 / 2, wireY + symbolSpacing);
        ctx.lineTo(groundBX + symbolWidth2 / 2, wireY + symbolSpacing);
        ctx.moveTo(groundBX - symbolWidth3 / 2, wireY + 2 * symbolSpacing);
        ctx.lineTo(groundBX + symbolWidth3 / 2, wireY + 2 * symbolSpacing);
        ctx.stroke();
    }
    
    // 5. Draw distance markers
    function drawDistanceMarkers() {
        const y = bobY + 80;
        const tickHeight = 10;
        
        ctx.beginPath();
        // Ticks
        ctx.moveTo(plateAX, y - tickHeight / 2);
        ctx.lineTo(plateAX, y + tickHeight / 2);
        ctx.moveTo(cx, y - tickHeight / 2);
        ctx.lineTo(cx, y + tickHeight / 2);
        ctx.moveTo(plateBX, y - tickHeight / 2);
        ctx.lineTo(plateBX, y + tickHeight / 2);
        ctx.stroke();
        
        // Arrows and lines
        ctx.beginPath();
        // Left segment
        ctx.moveTo(plateAX, y);
        ctx.lineTo(cx, y);
        drawArrowHead(plateAX, y, Math.PI);
        drawArrowHead(cx, y, 0);

        // Right segment
        ctx.moveTo(cx, y);
        ctx.lineTo(plateBX, y);
        drawArrowHead(cx, y, Math.PI);
        drawArrowHead(plateBX, y, 0);
        ctx.stroke();

        // Labels
        ctx.font = "italic 18px Times New Roman";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('d', cx - d_pixels / 2, y + 15);
        ctx.fillText('d', cx + d_pixels / 2, y + 15);
    }

    // 6. Draw all text labels
    function drawLabels() {
        // Pendulum labels
        ctx.font = "italic 20px Times New Roman";
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('l', cx - 15, suspensionY + l_pixels / 2);
        
        ctx.textAlign = 'left';
        ctx.fillText('m, q', cx + bobRadius + 5, bobY + 5);

        // Plate labels
        ctx.font = "24px Times New Roman";
        ctx.textAlign = 'center';
        ctx.fillText('A', plateAX - 25, suspensionY + l_pixels / 2);
        ctx.fillText('B', plateBX + 25, suspensionY + l_pixels / 2);

        // Caption
        ctx.font = "20px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('电图 1.33.1', cx, canvas.height - 10);
    }
    
    // Execute drawing functions
    drawSupport();
    drawPendulum();
    drawPlates();
    drawGrounding();
    drawDistanceMarkers();
    drawLabels();

</script>

</body>
</html>